<template>

    <el-container>
        
        <el-container>

            <el-aside width="220px">
                <!-- <el-header> -->
                    <user-info ></user-info>
                <!-- </el-header> -->
                <app-list></app-list>
            </el-aside>
            <el-container>
                <div class="container">
                    <el-aside width="290px">
                        <group-list></group-list>
                    </el-aside>
                    <el-container>
                            <el-main>
                                <message-info></message-info>
                            </el-main>
                            <el-footer>
                                <send-message></send-message>
                            </el-footer>
                    </el-container>
                </div>
            </el-container>
        </el-container>
    </el-container>

</template>

<script>


    import MessageInfo from "@/views/message/components/MessageInfo";
    import SendMessage from "@/views/message/components/SendMessage";
    import GroupList from "@/views/message/components/GroupList";
    import UserInfo from "@/views/message/components/UserInfo";
    import AppList from "@/views/message/components/AppList";

    export default {
        name: "GptMessage",
        components: {
            MessageInfo,
            SendMessage,
            GroupList,
            UserInfo,
            AppList
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #409EFF;
    }
    .el-footer{
        min-height: 150px;
        height: auto !important;
    }
    .el-container {
        overflow: hidden;
    }
    .container{
        border-radius: 16px;
        background-color: #fff;
        width: 100%;
        display: flex;
        margin: 16px;
        box-shadow: 0px 0px 1px 0px rgba(19, 51, 107, 0.15),0px 1px 2px 0px rgba(19, 51, 107, 0.10);
    }
    .el-aside {
        /*display: flex;*/
        height: 100%;
    }
    

    .el-image {
        margin: auto;
        padding: 10px;
    }


</style>